<script setup lang="ts">
import {ref, onActivated} from "vue";
import type {LineChartType, PieChartType} from "@/components/DataEcharts/EchartsType";
import type {DataStatisticItem} from "@/components/DataStatistic.vue";
import {getRegisterChartApi, getUserOverviewApi, getLevelChartApi, getTagChartApi} from "@/apps/admin/api/user/user";

/**
 * 用户概览
 */
const overview = ref<DataStatisticItem[]>([])


/**
 * 折线图
 */
const register = ref<LineChartType>({
  type: "line-chart",
  title: "会员注册信息",
  labels: [],
  values: [],
  unit: '人'
})

/**
 * 会员概览
 */
async function getUserOverview() {
  const {code, data} = await getUserOverviewApi<DataStatisticItem[]>({})
  if (code === 200) {
    overview.value = data
  }
}


/**
 * 注册统计
 */
async function getRegisterChart() {
  const {code, data} = await getRegisterChartApi<{ labels: string[], values: number[] }>({})
  if (code === 200) {
    register.value = {
      ...register.value,
      values: data.values,
      labels: data.labels
    }
  }
}


/**
 * 会员等级状态
 */
const LevelChart = ref<PieChartType>({
  type: "pie-chart",
  title: "会员等级状态",
  values: []
})


/**
 * 等级统计
 */
async function getLevelChart() {
  const {code, data} = await getLevelChartApi<Array<{ value: number, name: string }>>()
  if (code === 200) {
    LevelChart.value.values = data
  }
}


/**
 * 标签统计
 */
function getLevelTags() {

}

onActivated(() => {
  getUserOverview()
  getRegisterChart()
  getLevelChart()
  getLevelTags()
})
</script>
<template>
  <div>
    <data-statistic v-if="overview.length" :data="overview"></data-statistic>
    <div class="app-margin-bottom-interval app-card-bg">
      <data-card>
        <data-echarts class="app-margin-top-interval" :data="register"/>
      </data-card>
    </div>
    <div class="app-margin-bottom-interval app-card-bg">
      <data-card>
        <data-echarts class="app-margin-top-interval" :data="LevelChart"/>
      </data-card>
    </div>
  </div>
</template>